<template>
    <yplayout v-if="isload">
      <template #header="head">
        <div class="flex items-center">
          <i class="ri-lg text-gray-500 ml-2 ri-list-unordered"></i>
          <div class="text-lg px-3">无限分类</div>
          <div class="text-gray-400 text-sm">用于菜单，联动，等</div>
        </div>
        <div class="flex-1"></div>
      </template>
      <template #list>
        <div class="flex items-center space-x-2 p-2 text-sm">
          <div>路径：</div>
          <div class="flex">
            <div class="text-gray-500 hover:text-blue-500 hover:cursor-pointer" @click="routerTo(0,1)">顶级</div>
            <div v-for="(item,index) in pathinfo" class="text-gray-500 hover:text-blue-500 hover:cursor-pointer" @click="routerTo(item.id,1)" :key="index">
              <span class="px-2 text-gray-300">></span>{{ item.title }}
            </div>
          </div>
          <div class="flex-1"></div>
          <div>
            <router-link to="add" class="btn btn-lan">增加</router-link>
          </div>
        </div>
        <div class="flex-1 overflow-auto text-sm px-2">
          <table class="yp-table-datalist text-hui-300">
            <thead class="font-thin">
              <tr class="sticky -top-1 bg-gray-100">
                <th class="p-2 w-20">ID</th>
                <th>名称</th>
                <th class="text-center w-32">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr class="hover:bg-gray-100" v-for="(item,index) in dataList" :key="index">
                <td class="text-hui-200">{{ item.id }}</td>
                <td v-if="item.havesid" @click="routerTo(item.id,1)">
                  <div class="flex space-x-2" >
                    <div>
                      <i class="ri-folder-fill text-yellow-500"></i>
                    </div>
                    <div>
                      {{ item.title }}
                    </div>
                  </div>
                </td>
                <td v-else>
                  <div class="flex space-x-2">
                    <div>
                      {{ item.title }}
                    </div>
                  </div>
                </td>
                <td>
                  <div class="flex space-x-2 justify-center">
                    <router-link :to="'edit?id='+item.id" class="btn btn-small">编辑</router-link>
                    <router-link :to="'add?pid='+item.id" class="btn btn-chen btn-small">增加子级</router-link>
                    <button class="btn btn-hong btn-small" @click="destory(item.id)">删除</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-if="pageData.pageCount>1">
          <yppage @topage="topage" :pageData="pageData" />
        </div>
     
      </template>
    </yplayout>
  </template>
  
  <script setup>
  import { getData,postData,alter,confirms } from '@/common/base'
  import { ref,reactive,inject, onMounted, watch } from 'vue'
  const isload=ref(false)
  const father=inject('father')

  const routerTo=(pid,page)=>{
    father.routerTo(pid,page)
    searchParams.pid=pid
    pageData.currentPage=page
    searchParams.page=page
  }

  //分页
  const pageData = reactive({
      totalRecords: 0,//总记录数
      pageCount: 0,//总页数
      currentPage: 1//当前页
  });
  const topage = (page) => {
      pageData.currentPage = page
      searchParams.page = page
      fther.routerTo(searchParams.pid,searchParams.page)

  }
  const searchParams = reactive({
      pid:0,
      keyword: '',
      page: pageData.currentPage
  })

  //监听节点
  watch(searchParams,(newVal)=>{
    getList()
  })
  //面包屑
  const pathinfo=reactive([])
  //数据
  const dataList = reactive([])
  //获取数据
  const getList= async ()=>{
    const resp= await getData("classify/index",searchParams)

    pageData.totalRecords = resp.data.total
    pageData.pageCount = resp.data.last_page
    dataList.length = 0
    resp.data.data.forEach((item) => {
        dataList.push(item)
    })
    getPath()

  }
  //获取路径
  const getPath=async()=>{
    const resp= await getData("classify/getPath",{id:searchParams.pid})
    if(resp.code==1){
      pathinfo.length=0
      Object.keys(resp.data).map((k)=>{
        pathinfo[k]=resp.data[k]
      })
    }
  }


  //删除分类
  const destory= (id)=>{
    confirms({ text: '确认删除吗？' }).then(async ()=>{
      const resp= await postData("/classify/delete",{ids:id})
      if(resp.code==1){
        alter({ type: 'alter-success', text: resp.msg })
        getList()
      }
    })
  }


  
  //页面加载完
  onMounted(()=>{
    
    searchParams.pid=father.query.pid
    searchParams.page=father.query.page
    pageData.currentPage=father.query.page

    isload.value=true
  })
  </script>
  